<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="股东数据" left-arrow fixed @click-left="onClickLeft">
            <!-- <template #right>
        <div class="tab_nav" @click="onClickRight"><van-icon name="plus" color="#1D69E4" />站长管理</div>
      </template> -->
        </van-nav-bar>
        <div class="level">
            <!-- <div class="profit_core_title"> -->
            <div class="auth_title" @click="authShow = true">
                <div>{{ auth == '' ? "授权列表" : auth }} <img src="../../images/mine/icon_more.png" alt=""></div>
            </div>
            <div class="level_city" :style="{ 'color': agentItem.text_color }">
                <div v-if="level != 0">
                    {{ agentItem.parent_region_name + agentItem.region_name }}
                </div>
                <div v-else>
                    {{ agentItem.agent_name }}
                </div>
            </div>
            <!-- </div> -->
            <img :src="agentItem.background" />
        </div>
        <div class="level_data" v-for="item, index in agentItem.data_list"
            v-if="agentItem.data_list && agentItem.data_list.length > 0">
            <div class="level_data_img">
                <img src="../../images/mine/icon_shuju.png" />
                {{ item.title }}
            </div>
            <div class="level_data_text">
                <div class="tips" v-if="item.desc">{{ item.desc }}</div>
                <div v-for="items, index in item.items" :key="index">
                    {{ items.left_text }}{{ items.right_text }}
                </div>
                <div class="tip_bom">
          区域总收益：{{ agentItem.total_income }} <div @click="handleIncome">查看详情<img src="../../images/icon_more1.png" alt=""></div>
        </div>
            </div>
        </div>
        <div>
            <div class="key-search">
                <van-field v-model="keyword" :placeholder="current==0?'请输入商家名称进行搜索':'请输入用户手机号/ID查询'" clearable />
                <div class="key-img" @click="getSerchdata">
                    <img src="../../images/search-icon.png" alt="">
                </div>
            </div>
            <div class="subsidy_title">
                <div class="subsidy_title_list" v-for="item,index in agentItem.tab_headers" :class="{ 'active': current === index }" @click="setCurrent(index)">{{ item.name }}({{ item.count }})</div>
                <!-- <div class="subsidy_title_list" :class="{ 'active': current === 1 }" @click="setCurrent(1)">区域下属代理</div> -->
            </div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
            @load="onLoad" offset="0" >
                <div class="order_all" v-for="item, index in subsidyList" :key="index" :title="item"
                    v-if="current === 0">
                    <div class="order_name_return">
                        <div class="order_name_left">{{ item.name }}</div>
                        <div class="balance_amt">{{ item.region_name }}</div>
                    </div>
                    <div class="ectension_list">
                        <div class="ectension_list_item">
                            <div>{{ item.today_order }}</div>
                            <div class="ectension_list_item_title">今日订单数</div>
                        </div>
                        <div class="ectension_list_item">
                            <div>{{ item.today_amount }}</div>
                            <div class="ectension_list_item_title">今日营业额</div>
                        </div>
                        <div class="ectension_list_item">
                            <div>{{ item.today_income }}</div>
                            <div class="ectension_list_item_title">今日收益</div>
                        </div>
                        <div class="ectension_list_item">
                            <div>{{ item.history_income }}</div>
                            <div class="ectension_list_item_title">总计收益</div>
                        </div>
                    </div>
                </div>
                <div class="order_all" v-for="item, index in subsidyList" :key="index" :title="item" v-if="current === 1">
                    <div class="order_name_top">
                        <img v-if="item.owner?.avatar_url" :src="item.owner?.avatar_url" alt="">
                        <img v-else  src="../../images/mine/head.png" alt="">
                        <div>
                            <div class="order_name_top_left">{{ item.owner?.name }}</div>
                            <div class="balance_top_amt">{{ item.region_name }}</div>
                        </div>
                    </div>
                    <div class="ectension_list">
                        <div class="ectension_list_item">
                            <div>{{ item.store_count || 0 }}</div>
                            <div class="ectension_list_item_title">区域站长数</div>
                        </div>
                        <div class="ectension_list_item">
                            <div>{{ item.today_turnover ||0 }}</div>
                            <div class="ectension_list_item_title">今日营业额</div>
                        </div>
                        <div class="ectension_list_item">
                            <div>{{ item.month_turnover || 0 }}</div>
                            <div class="ectension_list_item_title">本月营业额</div>
                        </div>
                        <div class="ectension_list_item">
                            <div>{{ item.total_turnover || 0 }}</div>
                            <div class="ectension_list_item_title">总营业额</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <!-- <div class="level_data" style="margin-top: 0.2rem;padding-bottom: 0;" v-if="level!=0">
        <div class="level_data_img">
          <img src="../../../images/mine/icon_shuju.png" />
          合伙人管理
        </div>
        <van-field
          v-model="agentItem.partner_quota"
          name="partner_quota"
          label="剩余名额"
          placeholder="请输入剩余名额"
          input-align="right"
          readonly
        />
        <van-field
          v-model="account"
          name="account"
          label="赠送合伙人"
          placeholder="请输入对方手机号"
          input-align="right"
        />
      </div> -->
        <!-- <van-button
      v-if="level!=0"
        round
        block
        type="info"
        :disabled="account==''"
        @click="showPopup = true"
        style="width: 95%;margin: 0.32rem auto;"
        color="linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%)"
        >确认赠送</van-button
      > -->
        <van-popup v-model="showPopup" round closeable @click-close-icon="closeClick" position="bottom"
            class="balance-pay-popup-wrap" :style="{ height: showKeyboard ? '450px' : '250px' }">
            <div class="title">确认支付</div>
            <!-- 交易密码 -->
            <div class="row border-none">
                <span class="desc">请输入支付密码:</span>
            </div>
            <div class="row border-none">
                <van-password-input :value="tradePassword" :focused="showKeyboard"
                    @focus="handleShowKeyboard"></van-password-input>
                <van-number-keyboard v-model="tradePassword" :show="showKeyboard" :maxlength="maxlength"
                    :hide-on-click-outside="false" @input="onPasswordInput" @delete="onPasswordDelete"
                    @blur="showKeyboard = false"></van-number-keyboard>
            </div>
        </van-popup>
        <van-popup v-model="authShow" position="bottom">
            <van-picker title="选择授权列表" value-key="name" show-toolbar :columns="options" @confirm="onConfirmBig"
                @cancel="authShow = false" :value="cascaderValue" />
        </van-popup>
    </div>
</template>
<script>
import { AGENT_GIVE_AWAY_PARTNER, DATA_AUTH_INFO, BIG_AGENT_INFO, DATA_AUTH_STORE_LIST, DATA_AUTH_LIST, LEVEL_INFO, DATA_AUTH_AGENT_LIST } from '@/api/mine'
export default {
    data() {
        return {
            num: 2,
            account: "",
            level: '',
            showPopup: false,
            maxlength: 6,
            showKeyboard: false,
            tradePassword: "",
            completePassword: false,
            agentItem: {},
            partner_quota: "",
            current: 0,
            finished: false,
            loading: true,
            subsidyList: [],
            keyword: '',
            auth: '',
            authShow: false,
            options: [],
            cascaderValue: '',
            code: '',
            page: 1,
            pageSize: 100,
        };
    },
    mounted() {
        // window.scrollTo(0, 0)
        this.getAuthList()
        // if (this.$route.query.level == 0) {
        //     this.getBigAgentInfo()
        // } else {
        //     this.getAgentInfo()
        // }
    },
    methods: {
        // getAgentInfo() {
        //     this.$http.get(AGENT_INFO + this.$route.query.level).then(res => {
        //         this.agentItem = res.data
        //     })
        // },
        // getBigAgentInfo() {
        //     this.$http.get(BIG_AGENT_INFO, { params: { id: this.$route.query.level } }).then(res => {
        //         this.agentItem = res.data
        //     })
        // },
        getLevelInfo(level,code) {
            this.$http.get(DATA_AUTH_INFO,{params:{code,level}}).then(res => {
                this.agentItem = res.data
            })
        },
        getAuthList() {
            this.$http.get(DATA_AUTH_LIST).then(res => {
                this.options = res.data
                this.auth = res.data[0].name
                this.code = res.data[0].code
                this.level = res.data[0].level
                this.cascaderValue = res.data[0].code
                this.getLevelInfo(res.data[0].level,res.data[0].code)
                this.$nextTick(()=>{
                    this.onLoad()
                })
            })
        },
        onConfirmBig(value) {
            this.authShow = false
            // this.background = value.background
            this.auth = value.name
            this.code = value.code
            this.level = value.level
            // this.extra_tag = value.extra_tag
            // this.text_color = value.text_color
            this.current=0
            this.getLevelInfo(value.level,value.code)
            this.resetInit()
        },
        onClickLeft() {
            this.$router.back();
        },
        onClickRight() {
            this.$router.push({ name: 'stationmaster', query: { level: this.$route.query.level } })
        },
        // 点击切换tab
        setCurrent(index) {
            this.current = index;
            // if()
            // 数据请求
            this.resetInit();
        },
        resetInit() {
            this.page = 1;
            this.subsidyList = [];
            this.finished = false;
            this.loading = true;
            this.onLoad()
        },
        getSerchdata() {
            this.resetInit();
        },
            //区域收益
    handleIncome(){
      this.$router.push({ name: 'revenue', query: { id:this.agentItem.code ,msg:this.level} })
    },
        onLoad() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['keyword'] = this.keyword;
            params['level'] = this.level;
            params['code'] = this.code;
            let api = this.current == 0 ? DATA_AUTH_STORE_LIST : DATA_AUTH_AGENT_LIST
            this.$http.get(api, { params: params })
                .then(res => {
                    const {
                        list
                    } = res.data;
                    // this.tips = res.data.tip
                    if (list && list.length) {
                        this.page++;
                        this.subsidyList = this.subsidyList.concat(list);
                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
        // 确认赠送
        handleShowKeyboard() {
            this.tradePassword = "";
            this.completePassword = false;
            this.showKeyboard = true;
        },
        onPasswordInput(t) {
            (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
                this.tradePassword.length !== this.maxlength ||
                this.completePassword ||
                ((this.completePassword = !0), this.onSubmit());
        },
        onPasswordDelete() {
            this.tradePassword &&
                ((this.tradePassword = this.tradePassword.slice(
                    0,
                    this.tradePassword.length - 1
                )),
                    (this.completePassword = this.tradePassword.length === this.maxlength));
        },
        closeClick() {
            this.showPopup = false;
            this.tradePassword = "";
            this.completePassword = "";
        },
        onSubmit() {
            if (this.loading) {
                return;
            }
            this.loading = true;
            let params = {
                level: this.level,
                account: this.account,
                pay_password: this.tradePassword,
            };
            this.$http.post(AGENT_GIVE_AWAY_PARTNER, params)
                .then(() => {
                    this.loading = false;
                    this.showPopup = false;
                    this.$toast.success('赠送成功');
                    this.account = ''
                    this.pay_password = ''
                    this.tradePassword = "";
                    this.completePassword = "";
                    this.getAgentInfo()
                })
                .catch(() => {
                    this.loading = false;
                })
        },
    },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    //   min-height: 100vh;
    min-height: calc(100vh - 46px);

    padding-top: 46px;
    background: #f2f4f5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.tab_nav {
    border-radius: .08rem;
    padding: .08rem .16rem;
    color: #1D69E4;
    border: 1px solid #1D69E4;
}

.level {
    position: relative;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 0.2rem;

    .auth_title {
        position: absolute;
        top: 26%;
        background-color: #fff;
        border-radius: 0px 100px 100px 0px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: .24rem;
        color: #666666;
        padding: .04rem .12rem;

        div {
            display: flex;
            align-items: center;

            img {
                width: .32rem;
                height: .32rem;
                margin-left: .04rem;
            }
        }
    }

    .level_city {
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0 auto;
        font-size: 0.26rem;
        font-weight: bold;
        line-height: 0.52rem;
        padding-left: 0.2rem;
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
    }

    img {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
}

.order_all {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    // border: 0.01rem solid #999;
    border-radius: 0.16rem;
    background: #fff;
    .order_name_top{
        width: 90%;
        margin: 0 auto;
        padding-top: 0.32rem;
        display: flex;
        align-items: center;
        img{
            width: 1rem;
            height: 1rem;
            margin-right: .2rem;
        }
        .order_name_top_left{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;
        }
        .balance_top_amt{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: .2rem;
            // text-align: right;
            font-size: 0.24rem;
            font-family: PingFangSC, PingFang SC;
            color: #666;
        }
    }
    .order_name_return {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        padding: 0.32rem;
        padding-bottom: 0;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        .order_name_left {
            width: 48%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;
        }

        .balance_amt {
            // margin-top: 0.3rem;
            // font-weight: bold;
            width: 48%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
            font-size: 0.24rem;
            font-family: PingFangSC, PingFang SC;
            color: #666;
        }

        // &_right {
        //     font-size: 0.25rem;
        // }
    }

    .ectension_list {
        padding: 0.32rem;
        // padding-top: 0.2rem;
        display: flex;
        justify-content: space-between;

        .ectension_list_item {
            width: 25%;
            text-align: center;
            font-size: 0.28rem;
            line-height: 0.6rem;

            .ectension_list_item_title {
                font-size: .24rem;
                color: #666;
            }
        }
    }
}

.level_data {
    width: 95%;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 0.2rem;
    border-radius: 8px;

    // margin-top: 0.2rem;
    .level_data_img {
        background: #f4f7fd;
        border-radius: 8px 8px 0px 0px;
        // opacity: 0.06;
        padding: 0.2rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 0.28rem;
        // line-height: 0.4rem;
        // text-align: left;
        color: #333333;
        font-style: normal;

        img {
            width: 0.32rem;
            vertical-align: middle;
        }
    }

    .level_data_text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.24rem;
        color: #666666;
        line-height: 0.44rem;
        // text-align: left;
        font-style: normal;
        padding-left: 0.2rem;
        margin-top: 0.2rem;
    }
}

.level_title {
    width: 95%;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 0.2rem;
    border-radius: 8px;
    margin-top: 0.2rem;

    .level_title_btn {
        display: flex;
        justify-content: space-between;
        padding: 0.2rem;

        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 0.32rem;
            color: #333333;
            line-height: 0.44rem;
            text-align: left;
            font-style: normal;
        }

        .btn {
            padding: 0.1rem 0.3rem;
            background: linear-gradient(270deg, #1261E2 0%, #4A89EC 100%);
            border-radius: 0.28rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 0.24rem;
            color: #ffffff;
            line-height: 0.34rem;
            //   text-align: left;
            font-style: normal;
        }
    }

    .level_title_text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.24rem;
        color: #666666;
        line-height: 0.44rem;
        // text-align: left;
        font-style: normal;
        margin-left: 0.2rem;
    }
}

.balance-pay-popup-wrap {
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    text-align: center;
    padding: 0.32rem;
    box-sizing: border-box;

    .title {
        color: #1b1b1b;
        font-size: 0.36rem;
        font-weight: 700;
        margin-bottom: 0.3rem;
    }

    .row {
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid #ebedf0;

        &.border-none {
            border: none;
        }
    }

    .van-password-input {
        width: 100%;
        margin: 0;
    }
}

.key-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    margin: 0 auto;
    margin-top: .2rem;

    ::v-deep .van-cell {
        border-radius: .12rem;
        width: 83%;
    }

    .key-img {
        background: #1D69E4;
        border-radius: 6px;
        width: 15%;
        padding: .24rem 0;
        display: flex;

        img {
            display: block;
            margin: 0 auto;
            // line-height: .72rem;
            width: .3rem;
            height: .3rem;
        }
    }
}

.subsidy_title {
    // width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    display: flex;
    font-size: 0.28rem;
    padding: .24rem .24rem 0 .24rem;
    box-sizing: border-box;
    // background-color: #fff;

    .subsidy_title_list {
        margin-right: 0.4rem;
        // font-size: 0.28rem;
        position: relative;
        color: #666666;
        padding-bottom: 0.24rem;
    }

    .subsidy_title_list.active {
        color: #1D69E4;
        font-weight: 500;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30%;
            height: 2px; // 横杠的高度，可以根据需要调整
            background-color: #1D69E4; // 红色横杠
        }

        /* 选中时黑色 */
    }


}
.tip_bom{
  width:98%;
  border-top: 1px solid #E3E3E3;
  display: flex;
  justify-content: space-between;
  margin-top: .12rem;
  padding-top: .1rem;
  // padding-right: .12rem;
  color: #333333;
  box-sizing: border-box;
  div{
    display: flex;
    align-items: center;
    color: #1D69E4;
    img{
      width: .32rem;
      height: .32rem;
    }
  }
}
</style>